<template>
	<view>
		<view class="special-explanation">
			<view class="title">特殊说明</view>
			<view class="bottom df">
				<view class="imgs-box">
					<z-upload-image limit="1" v-model:files="specialPic" action-type="custom">
						<view class="imgs flex-column-center">
							<image src="http://www.xvopen.com/xiaoV/img1/camera.png" mode=""></image>
							上传图片
						</view>
					</z-upload-image>
				</view>
				<view class="description">
					<textarea class="txtarea" v-model="txtareaDesc" placeholder="给店家捎句话吧..."  maxlength="100" @input="txtareaInput"/>
					<view class="subscript">
						{{txtareaDesc.length}}/100
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue'
	let props = defineProps({
		// dropList: {
		//     type: Array,
		//     default: function(){
		//     		return [];
		//     	}
		// }
	})
//-----------------------------------data-----------------
let txtareaDesc = ref("")
let specialPic = ref("")

const emits = defineEmits(['change'])
//-----------------------------------watch---------------
watch(specialPic,(newVal,oldVal)=>{
	if(newVal){
		emits('change',  {pic:newVal,url:txtareaDesc.url})
	}
},{immediate:true})

//-----------------------------------function-------------

function txtareaInput(e){
	console.log(e)
	if(txtareaDesc.value.length==100){
		uni.showToast({
			title: '最多只能输入100个字',
			duration: 2000,
			icon:'none',
			position:'top'
		});
	}else{
		emits('change',  {pic:specialPic.value,txt:txtareaDesc.value})
	}
}


</script>

<style scoped lang="scss">
	@import "../style/common.scss";
</style>
